<template>
  <div>
    <!-- img-comparison-slider Tutorial --> 
    <!-- example url:https://img-comparison-slider.sneas.io/examples.html -->
    <ImgComparisonSlider hover="hover">
        <!-- eslint-disable -->
        <img
            slot="first"
            style="width: 100%"
            src="https://img-comparison-slider.sneas.io/demo/images/before.webp"
        />
        <img
            slot="second"
            style="width: 100%"
            src="https://img-comparison-slider.sneas.io/demo/images/after.webp"
        />
        <!-- eslint-enable -->
    </ImgComparisonSlider>

    <el-row>
        <el-col :span="8"><div class="grid-content bg-purple"></div></el-col>
        <el-col :span="8"><div class="grid-content bg-purple-light"></div></el-col>
        <el-col :span="8"><div class="grid-content bg-purple"></div></el-col>
    </el-row>
  </div>
</template>

<script>
import { ImgComparisonSlider } from '@img-comparison-slider/vue';

export default {
  name: "ImageComparison",
  components: {
    ImgComparisonSlider
  }
};
</script>
